<template>
	<view>
		<view class="CCC"></view>
		<view>
			<view>
				<!-- <span class="saqwe1">最小值:</span> -->
				<input  type="text" v-model="taoyaa.numerica1" placeholder="请输入最小值" class="saqwe2"  />
				<!-- <view class="saqwe5"><span class="saqwe3">最大值:</span> -->
				<input  type="text" v-model="taoyaa.numerica2" placeholder="请输入最大值" class="saqwe4"  />
			</view>
			<view class="content">
				<view class="content-B headline-B">
					<view class="headline-A"></view>
					<view class="title">柱塞上升速度</view>
				</view>
			</view>
			<view class="BBB">
				<view class="qiun-charts">
					<!-- <scroll-view scroll-x="true" class="scroll-x" >
						<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA" >
						</canvas>
					</scroll-view> -->
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchstart1" @touchmove="touchmove1" @touchend="touchend1"/>
				</view>
			</view>
		</view>
		<view>
			<view>
				<!-- <span class="saqwe1">最小值:</span> -->
				<input  type="text" v-model="taoyab.numericb1" placeholder="请输入最小值" class="saqwe2"  />
				<!-- <view class="saqwe5"><span class="saqwe3">最大值:</span> -->
				<input  type="text" v-model="taoyab.numericb2" placeholder="请输入最大值" class="saqwe4"  />
			</view>
			<view class="content" >
				<view class="content-B headline-B">
					<view class="headline-A"></view>
					<view class="title">套压降幅</view>
				</view>
			</view>
			<view class="BBB">
				<view class="qiun-charts" >
					<!-- <scroll-view scroll-x="true" class="scroll-x" >
						<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineB" @touchmove="moveLineB" @touchend="touchEndLineB"></canvas>
					</scroll-view> -->
					<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts" @touchstart="touchstart2" @touchmove="touchmove2" @touchend="touchend2"/>
				</view>
			</view>
		</view>
		
		<view>
			<view>				<!-- <span class="saqwe1">最小值:</span> -->
				<input  type="text" v-model="taoyac.numericc1" placeholder="请输入最小值" class="saqwe2"  />
				<!-- <view class="saqwe5"><span class="saqwe3">最大值:</span> -->
				<input  type="text" v-model="taoyac.numericc2" placeholder="请输入最大值" class="saqwe4"  />
			</view>
			<view class="content">
				<view class="content-B headline-B">
					<view class="headline-A"></view>
					<view class="title">负荷系数</view>
				</view>
			</view>
			<view class="BBB">
				<view class="qiun-charts">
					<!-- <scroll-view scroll-x="true" class="scroll-x" >
						<canvas canvas-id="canvasLineC" id="canvasLineC" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineC" @touchmove="moveLineC" @touchend="touchEndLineC">
						</canvas>
					</scroll-view> -->
					<canvas canvas-id="canvasLineC" id="canvasLineC" class="charts" @touchstart="touchstart3" @touchmove="touchmove3" @touchend="touchend3"/>
				</view>
			</view>
		</view>
		<view>
			<view>
				<!-- <span class="saqwe1">最小值:</span> -->
				<input  type="text" v-model="taoyad.numericd1" placeholder="请输入最小值" class="saqwe2"  />
				<!-- <view class="saqwe5"><span class="saqwe3">最大值:</span> -->
				<input  type="text" v-model="taoyad.numericd2" placeholder="请输入最大值" class="saqwe4"  />
			</view>
			<view class="content">
				<view class="content-B headline-B">
					<view class="headline-A"></view>
					<view class="title">水产差压</view>
				</view>
			</view>
			<view class="BBB">
				<view class="qiun-charts">
					<!-- <scroll-view scroll-x="true" class="scroll-x" >
						<canvas canvas-id="canvasLineD" id="canvasLineD" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineD" @touchmove="moveLineD" @touchend="touchEndLineD">
						</canvas>
					</scroll-view> -->
					<canvas canvas-id="canvasLineD" id="canvasLineD" class="charts" @touchstart="touchstart4" @touchmove="touchmove4" @touchend="touchend4"/>
				</view>
			</view>
		</view>
		
		<view>
			<view>
				<!-- <span class="saqwe1">最小值:</span> -->
				<input  type="text" v-model="taoyae.numerice1" placeholder="请输入最小值" class="saqwe2"  />
				<!-- <view class="saqwe5"><span class="saqwe3">最大值:</span> -->
				<input  type="text" v-model="taoyae.numerice2" placeholder="请输入最大值" class="saqwe4"  />
			</view>
			<view class="content">
				<view class="content-B headline-B">
					<view class="headline-A"></view>
					<view class="title">柱塞上行速度</view>
				</view>
			</view>
			<view class="BBB">
				<view class="qiun-charts">
					<!-- <scroll-view scroll-x="true" class="scroll-x" >
						<canvas canvas-id="canvasLineD" id="canvasLineD" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineD" @touchmove="moveLineD" @touchend="touchEndLineD">
						</canvas>
					</scroll-view> -->
					<canvas canvas-id="canvasLineE" id="canvasLineE" class="charts" @touchstart="touchstart5" @touchmove="touchmove5" @touchend="touchend5"/>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import Loading1 from "@/compoents/loading11.vue";
	//import uCharts from '@/js_sdk/u-charts/u-charts.js';
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	import { timeTrans } from '@/js_sdk/u-charts/time.js'
	var _self;
	/* var canvaLineA=null;
	var canvaLineB=null;
	var canvaLineC=null;
	var canvaLineD=null;
	var canvaLineE=null; */
	var lastMoveTime2=null
	var lastMoveTime=null;//最后执行移动的时间戳
	var lastMoveTime3=null
	var lastMoveTime4=null
	var lastMoveTime5=null;
	var uChartsInstance1 = {};
	var uChartsInstance2 = {};
	var uChartsInstance3 = {};
	var uChartsInstance4 = {};
	var uChartsInstance5 = {};
	
	export default {
		components:{
			Loading1,
		},
		data() {
			return {
				taoyaa:{
					numerica1:null,
					numerica2:null,
				},	
				taoyab:{
					numericb1:null,
					numericb2:null,
				},
				taoyac:{
					numericc1:null,
					numericc2:null,
				},
				taoyad:{
					numericd1:null,
					numericd2:null,
				},
				taoyae:{
					numerice1:null,
					numerice2:null,
				},
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				itemCount:4,
				textarea:'',
				Interactive:'',//交互显示的数据
				startDate: '',
				endDate: '',
				step: '',
				tempAxis:[],
				tempAxis2:[],
				tempAxis3:[],
				tempAxis4:[],
				tempAxis5:[],
				yAxis1:[],
				yAxis2:[],
				yAxis3:[],
				yAxis4:[],
				yAxis5:[],
				waterAxis1:'',
				waterAxis2:'',
				wateryAxis2:'',
				gasyAxis3:'',
				waterAxisMax4:'',
				pressureAxisMax5:'',
				waringText:[],
				mode:'',
				currentOpenWellTime:'',
				currentCloseWellTime:'',
				currentStatus:'',
				countdownTime:'',
				loadingA:'',
				loadingB:'',
				JS:0,
				ty:0,
				// 柱塞上行曲线
				sxChartData: {
				  wellName: this.$route.params.name,
				  firstyAxisData: [],
				  xAxisData: [],
				  axisName: ['柱塞上行速度'],
				  yAxisName: '柱塞上行速度(m/s)',
				  maxValue: '',
				  minValue: ''
				},
			}
		},
		watch: {
			//套压降幅范围值b
			taoyab: {
			    handler (newName, oldName) {
					_self = this; 
			        let eee1 = JSON.parse(JSON.stringify(_self.yAxis2))
			        if(_self.taoyab.numericb1!=null){
			        		//测试
			        	for(let a = 0;a<eee1.length;a++){
			        		if(eee1[a] < _self.taoyab.numericb1){
			        			eee1[a]=null;
			        		}
			        	}
			        };
					if(_self.taoyab.numericb2!=null){
						//测试
						for(let a = 0;a<eee1.length;a++){
							if(eee1[a] > _self.taoyab.numericb2){
								eee1[a]=null;
							}
						}
					};
			        let LineB={
			        		categories:_self.tempAxis2,
			        		series:[{
			        			"name": "套压降幅",
			        			"data": eee1,
			        		}]	
			        };
			        _self.drawCharts2("canvasLineB",LineB);
			        },
					deep: true,
			},
			//柱塞上升速度范围值a
			taoyaa: {
			    handler (newName, oldName) {
					_self = this;
			        let eee1 = JSON.parse(JSON.stringify(_self.yAxis1))
			        if(_self.taoyaa.numerica1!=null){
			        		//测试
			        	for(let a = 0;a<eee1.length;a++){
			        		if(eee1[a] < _self.taoyaa.numerica1){
			        			eee1[a]=null;
			        		}
			        	}
			        };
					if(_self.taoyaa.numerica2!=null){
						//测试
						for(let a = 0;a<eee1.length;a++){
							if(eee1[a] > _self.taoyaa.numerica2){
								eee1[a]=null;
							}
						}
					};
			        let LineA={
			        		categories:_self.tempAxis,
			        		series:[{
			        			"name": "柱塞上升速度",
			        			"data": eee1,
			        		}]	
			        };
			        _self.drawCharts("canvasLineA",LineA);
			        },
					/* immediate: true,*/
					deep: true, 
			},
			//负荷系数范围值
			taoyac: {
			    handler (newName, oldName) {
					_self = this;
			        let eee1 = JSON.parse(JSON.stringify(_self.yAxis3))
			        if(_self.taoyac.numericc1!=null){
			        		//测试
			        	for(let a = 0;a<eee1.length;a++){
			        		if(eee1[a] < _self.taoyac.numericc1){
			        			eee1[a]=null;
			        		}
			        	}
			        };
					if(_self.taoyac.numericc2!=null){
						//测试
						for(let a = 0;a<eee1.length;a++){
							if(eee1[a] > _self.taoyac.numericc2){
								eee1[a]=null;
							}
						}
						
					};
			        let LineC={
			        		categories:_self.tempAxis3,
			        		series:[{
			        			"name": "负荷系数",
			        			"data": eee1,
			        		}]	
			        };
			        _self.drawCharts3("canvasLineC",LineC);
			        },
					deep: true,
			},
			//水产差压范围值
			taoyad: {
			    handler (newName, oldName) {
					_self = this;
			        let eee1 = JSON.parse(JSON.stringify(_self.yAxis4))
			        if(_self.taoyad.numericd1!=null){
			        		//测试
			        	for(let a = 0;a<eee1.length;a++){
			        		if(eee1[a] < _self.taoyad.numericd1){
			        			eee1[a]=null;
			        		}
			        	}
			        };
					if(_self.taoyad.numericd2!=null){
						//测试
						for(let a = 0;a<eee1.length;a++){
							if(eee1[a] > _self.taoyad.numericd2){
								eee1[a]=null;
							}
						}
						
					};
			        let LineD={
			        		categories:_self.tempAxis4,
			        		series:[{
			        			"name": "水产差压",
			        			"data": eee1,
			        		}]	
			        };
			        _self.drawCharts4("canvasLineD",LineD);
			        },
					deep: true,
			},
			//柱塞上行速度范围值
			taoyae: {
			    handler (newName, oldName) {
					console.log(_self.taoyae.numerice1);
					_self = this;
			        let eee1 = JSON.parse(JSON.stringify(_self.yAxis5))
			        if(_self.taoyae.numerice1!=null){
			        		//测试
			        	for(let a = 0;a<eee1.length;a++){
			        		if(eee1[a] < _self.taoyae.numerice1){
			        			eee1[a]=null;
			        		}
			        	}
			        };
					if(_self.taoyae.numerice2!=null){
						//测试
						for(let a = 0;a<eee1.length;a++){
							if(eee1[a] > _self.taoyae.numerice2){
								eee1[a]=null;
							}
						}
						
					};
			        let LineE={
			        		categories:_self.tempAxis5,
			        		series:[{
			        			"name": "柱塞上行速度",
			        			"data": eee1,
			        		}]	
			        };
			        _self.drawCharts5("canvasLineE",LineE);
			    },
				deep: true,
			},
			
		},	
		onLoad(option) {
			_self = this;
			/* console.log("0000000000000");
			console.log(option.well_id); */
			/* this.getWarning(option.well_id);
			this.getTitie(option.well_name);
			this.getZszt(option.well_id); */
			this.getWellJsTy(option.well_id);
			this.getServerData(option.well_id);
			/* this.getWaterData(option.well_id); */
			this.cWidth=uni.upx2px(700);
			this.cHeight=uni.upx2px(400);
			//this.tbjz();
			//console.log(option)
		},
	
		methods: {
			// 300)以内
			zsSxOne(){
			        let len = 300/20
			        let c = []
			        for (let i = 0; i < len; i++) {
			          c[i] = ((-0.0377*(i*20)+14.5)*(1-0.05*(_self.ty-10))).toFixed(2)
			        }
			        _self.sxChartData.firstyAxisData = _self.sxChartData.firstyAxisData.concat(c)
					_self.yAxis5=_self.sxChartData.firstyAxisData
			},
			
			// [300-2100)
			zsSxTwo(){
				//console.log("............"); 
				let len = 2100/20
				let c = []
				for (let i = 0; i < len - (300/20); i++) {
			          let x = (i+300/20)*20
			          c[i] = ((0.0019*(x)+2.62)*(1-0.05*(_self.ty-10))).toFixed(2)
			        }
				_self.sxChartData.firstyAxisData = _self.sxChartData.firstyAxisData.concat(c)
				_self.yAxis5=_self.sxChartData.firstyAxisData
			},
			
			// [2100,3000)
			zsSxThree(){
			    let c = []
			    for (let i = 0; i <= (3000/20); i++) {
			      let x = (i+2100/20)*20
			      c[i] =parseFloat(((-0.000004*(x*x)+0.0167*x-10.82)*(1-0.05*(_self.ty-10))).toFixed(2)) 
			    }
			     _self.sxChartData.firstyAxisData = _self.sxChartData.firstyAxisData.concat(c)
				_self.yAxis5=_self.sxChartData.firstyAxisData
			},
			
			//title
			getTitie(name){
				uni.setNavigationBarTitle({
					title:name
					
				})
			},
			//油升套压/获得井深和套压
			getWellJsTy(wellId){
				uni.request({
					//url:'http://127.0.0.1:9011/zsgl/zscs/getWellJsTy/?id='+wellId,
					url:this.$requestUrl.requestUrl('/zs')+'/app/app/getWellJsTy/?id='+wellId,
					data:{},
					success:function(ref){
						_self.JS = ref.data.jx;
						if (_self.JS>0 && _self.JS<300){
						      _self.zsSxOne()
						    }
						if (_self.JS>=300 && _self.JS<2100){
						  _self.zsSxTwo()
						}
						if (_self.JS>=2100){
						  _self.zsSxThree()
						}
						let x = []
						for (let i = 0; i < _self.sxChartData.firstyAxisData.length; i++) {
						  x[i] = (i*20).toFixed(0)
						  if (i*20>=3000){
						    break
						  }
						}
						_self.sxChartData.xAxisData = x;
						_self.tempAxis5=_self.sxChartData.xAxisData
						let LineE={
							categories:_self.tempAxis5,
							series:[{
								"smooth":true,
								"name": "柱塞上行速度",
								"data": _self.yAxis5,
							}]	
						};
						_self.waterAxis1 = _self.xAxisMax(_self.yAxis5);
						_self.waterAxis2 = _self.xAxisMin(_self.yAxis5);
						/* console.log("柱 塞上行速度");
						console.log(LineE); */
						//_self.showLineE("canvasLineE",LineE);
						_self.drawCharts5("canvasLineE",LineE);
						/* _self.drawCharts("canvasLineE",LineE); */
					}
				});
			},
			//柱塞上升速度，套压降幅，，，曲线
			getServerData(wellId){
				//let tagUrl = "http://127.0.0.1:9011/zsgl/technologyDiagnosis/twelveCyclesData/"+wellId
				let tagUrl = this.$requestUrl.requestUrl('/zs')+'/app/app/twelveCyclesData/'+wellId;
				uni.request({
					url: tagUrl,
					data:{
					},
					success: function(resp) {
							var ss=resp.data.data;
						if (ss) {
							let allTags1 = []
							let allTags2 = []
							let allTags3 = []
							let allTags4 = []
							let allTagsC = []
							let allTagsCC = []
							let allTagsD = []
							let allTagsDD = []
							for (let i = ss.length-1; i >= 0; i--) {
								//上升速度
								allTags1.push(ss[i].openWellTime);
								allTags2.push(ss[i].sxsd);
								//套压降幅
								allTags3.push(ss[i].openWellTime);
								//保留两位小数
								//let sss2 = parseFloat(ss[i].tyjf).toFixed(3)
								allTags4.push(ss[i].tyjf);
								//载荷系数
								allTagsC.push(ss[i].openWellTime);
								allTagsCC.push(ss[i].openWellPayload);
								//水产差压
								allTagsD.push(ss[i].openWellTime);
								allTagsDD.push(ss[i].csyc);
								
							}
							_self.yAxis1=allTags2
							_self.tempAxis=allTags1
							_self.yAxis2=allTags4
							_self.tempAxis2=allTags3
							_self.tempAxis3=allTagsC
							_self.yAxis3=allTagsCC
							_self.tempAxis4=allTagsD
							_self.yAxis4=allTagsDD
						};
						/* console.log("柱塞上升速度");
						console.log(_self.yAxis1); */
						_self.pressureAxisMax5 = _self.xAxisMax(_self.yAxis1);
						let LineA={
							categories: _self.tempAxis,
							series:[{
							"name": "柱塞上升速度",
							"data": _self.yAxis1,
							}]	
						};
						_self.waterAxisMax4 = _self.xAxisMax(_self.yAxis2);
						let LineB={
							categories:_self.tempAxis2,
							series:[{
								"name": "套压降幅",
								"data": _self.yAxis2,
							}]	
						};
						_self.gasyAxis3 = _self.xAxisMax(_self.yAxis3);
						let LineC={
							categories:_self.tempAxis3,
							series:[{
								"name": "负荷系数",
								"data": _self.yAxis3,
							}]	
						};
						_self.waterAxis2 = _self.xAxisMax(_self.yAxis4);
						let LineD={
							categories:_self.tempAxis4,
							series:[{
								"name": "水产差压",
								"data": _self.yAxis4,
							}]	
						};
						/* console.log("最后最后");
						console.log(LineA);
						console.log(LineB); */
						/*console.log(LineC);
						console.log(LineD); */
						//_self.showLineA("canvasLineA",LineA);
						_self.drawCharts("canvasLineA",LineA);
						_self.drawCharts2("canvasLineB",LineB);
						_self.drawCharts3("canvasLineC",LineC);
						_self.drawCharts4("canvasLineD",LineD);
						
					},
				});	
			},
			//柱塞上行速度
			drawCharts(id,data){
			      const ctx = uni.createCanvasContext(id, this);
			        uChartsInstance1[id] = new uCharts({
			          type: "line",
			          context: ctx,
			          width: this.cWidth,
			          height: this.cHeight,
			          categories: data.categories,
			          series: data.series,
			          animation: true,
			          timing: "easeOut",
			          duration: 1000,
			          rotate: false,
			          rotateLock: false,
			          background: "#FFFFFF",
			          color: [ '#e72167', '#526c8f','#00a5f8'],
			          padding: [15,10,0,15],
			          fontSize: 13,
			          fontColor: "#666666",
			          dataLabel: false,//是否显示图表区域内数据点上方的数据文案
			          dataPointShape: false,
			          dataPointShapeType: "solid",
			          touchMoveLimit: 60,
			          enableScroll: true,//滚动
			          enableMarkLine: false,
			          legend: {
			            show: true,
			            position: "bottom",
			            float: "center",
			            padding: 5,
			            margin: 5,
			            backgroundColor: "rgba(0,0,0,0)",
			            borderColor: "rgba(0,0,0,0)",
			            borderWidth: 0,
			            fontSize: 13,
			            fontColor: "#666666",
			            lineHeight: 11,
			            hiddenColor: "#CECECE",
			            itemGap: 10
			          },
			          xAxis: {
			            disableGrid: true,
			            disabled: false,//x轴是否关闭
			            axisLine: true,
			            axisLineColor: "#CCCCCC",
			            calibration: false,
			            fontColor: "#666666",
			            fontSize: 8,//x轴分类项字体的大小
			            rotateLabel: true,//是否旋转x轴分类的数据
			            rotateAngle: 30,//旋转x轴分类的数据的度数
			            itemCount: 10,//x轴显示的个数分类个数
						labelCount:5,//x轴单屏数据显示的个数分类
			            boundaryGap: "center",
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            gridType: "solid",
			            dashLength: 0,
			            gridEval: 4,
			            scrollShow: false,
			            scrollAlign: "left",
			            scrollColor: "#A6A6A6",
			            scrollBackgroundColor: "#EFEBEF",
			            formatter: ""
			          },
			          yAxis: {
			            gridType: "dash",
			            dashLength: 2,
			            disabled: false,
			            disableGrid: false,
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            padding: 10,
			            showTitle: true,
			            data: [
			              {
			                type: "value",
			                position: "left",
			                disabled: false,
			                axisLine: true,
			                axisLineColor: "#CCCCCC",
			                calibration: false,
			                fontColor: "#666666",
			                fontSize: 13,
			                textAlign: "right",
			                title: "速度(m/min)",
			                titleFontSize: 11,
			                titleOffsetY: 0,
			                titleOffsetX: 0,
			                titleFontColor: "#666666",
			                min: null,
			                max: _self.pressureAxisMax5,
			                tofix: 2,
			                unit: "",
			                formatter: ""
			              },
			            ]
			          },
			          extra: {
			            line: {
			              type: "curve",
			              width: 2
			            },
			            tooltip: {
			              showBox: true,
			              showArrow: true,
			              showCategory: true,
			              borderWidth: 0,
			              borderRadius: 0,
			              borderColor: "#000000",
			              borderOpacity: 0.7,
			              bgColor: "#000000",
			              bgOpacity: 0.7,
			              gridType: "solid",
			              dashLength: 4,
			              gridColor: "#CCCCCC",
			              fontColor: "#FFFFFF",
			              splitLine: true,
			              horizentalLine: false,
			              xAxisLabel: false,
			              yAxisLabel: false,
			              labelBgColor: "#FFFFFF",
			              labelBgOpacity: 0.7,
			              labelFontColor: "#666666"
			            },
			            markLine: {
			              type: "solid",
			              dashLength: 4,
			              data: []
			            }
			          }
			        });
			},
			//其它
			touchstart1(e){
			  uChartsInstance1[e.target.id].scrollStart(e);
			},
			touchmove1(e){
			  uChartsInstance1[e.target.id].scroll(e);
			},
			touchend1(e){
			  uChartsInstance1[e.target.id].scrollEnd(e);
			  uChartsInstance1[e.target.id].touchLegend(e);
			  uChartsInstance1[e.target.id].showToolTip(e);
			},
			//套压降幅
			drawCharts2(id,data){
			      const ctx = uni.createCanvasContext(id, this);
			        uChartsInstance2[id] = new uCharts({
			          type: "line",
			          context: ctx,
			          width: this.cWidth,
			          height: this.cHeight,
			          categories: data.categories,
			          series: data.series,
			          animation: true,
			          timing: "easeOut",
			          duration: 1000,
			          rotate: false,
			          rotateLock: false,
			          background: "#FFFFFF",
			          color: [ '#e72167', '#526c8f','#00a5f8'],
			          padding: [15,10,0,15],
			          fontSize: 13,
			          fontColor: "#666666",
			          dataLabel: false,//是否显示图表区域内数据点上方的数据文案
			          dataPointShape: false,
			          dataPointShapeType: "solid",
			          touchMoveLimit: 60,
			          enableScroll: true,//滚动
			          enableMarkLine: false,
			          legend: {
			            show: true,
			            position: "bottom",
			            float: "center",
			            padding: 5,
			            margin: 5,
			            backgroundColor: "rgba(0,0,0,0)",
			            borderColor: "rgba(0,0,0,0)",
			            borderWidth: 0,
			            fontSize: 13,
			            fontColor: "#666666",
			            lineHeight: 11,
			            hiddenColor: "#CECECE",
			            itemGap: 10
			          },
			          xAxis: {
			            disableGrid: true,
			            disabled: false,//x轴是否关闭
			            axisLine: true,
			            axisLineColor: "#CCCCCC",
			            calibration: false,
			            fontColor: "#666666",
			            fontSize: 8,//x轴分类项字体的大小
			            rotateLabel: true,//是否旋转x轴分类的数据
			            rotateAngle: 30,//旋转x轴分类的数据的度数
			            itemCount: 10,//x轴显示的个数分类个数
						labelCount:5,//x轴单屏数据显示的个数分类
			            boundaryGap: "center",
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            gridType: "solid",
			            dashLength: 0,
			            gridEval: 4,
			            scrollShow: false,
			            scrollAlign: "left",
			            scrollColor: "#A6A6A6",
			            scrollBackgroundColor: "#EFEBEF",
			            formatter: ""
			          },
			          yAxis: {
			            gridType: "dash",
			            dashLength: 2,
			            disabled: false,
			            disableGrid: false,
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            padding: 10,
			            showTitle: true,
			            data: [
			              {
			                type: "value",
			                position: "left",
			                disabled: false,
			                axisLine: true,
			                axisLineColor: "#CCCCCC",
			                calibration: false,
			                fontColor: "#666666",
			                fontSize: 13,
			                textAlign: "right",
			                title: "载荷系数",
			                titleFontSize: 11,
			                titleOffsetY: 0,
			                titleOffsetX: 0,
			                titleFontColor: "#666666",
			                min: null,
			                max: _self.waterAxisMax4,
			                tofix: 2,
			                unit: "",
			                formatter: ""
			              },
			            ]
			          },
			          extra: {
			            line: {
			              type: "curve",
			              width: 2
			            },
			            tooltip: {
			              showBox: true,
			              showArrow: true,
			              showCategory: true,
			              borderWidth: 0,
			              borderRadius: 0,
			              borderColor: "#000000",
			              borderOpacity: 0.7,
			              bgColor: "#000000",
			              bgOpacity: 0.7,
			              gridType: "solid",
			              dashLength: 4,
			              gridColor: "#CCCCCC",
			              fontColor: "#FFFFFF",
			              splitLine: true,
			              horizentalLine: false,
			              xAxisLabel: false,
			              yAxisLabel: false,
			              labelBgColor: "#FFFFFF",
			              labelBgOpacity: 0.7,
			              labelFontColor: "#666666"
			            },
			            markLine: {
			              type: "solid",
			              dashLength: 4,
			              data: []
			            }
			          }
			        });
			},
			//其它
			touchstart2(e){
			  uChartsInstance2[e.target.id].scrollStart(e);
			},
			touchmove2(e){
			  uChartsInstance2[e.target.id].scroll(e);
			},
			touchend2(e){
			  uChartsInstance2[e.target.id].scrollEnd(e);
			  uChartsInstance2[e.target.id].touchLegend(e);
			  uChartsInstance2[e.target.id].showToolTip(e);
			},
			//负荷系数
			drawCharts3(id,data){
			      const ctx = uni.createCanvasContext(id, this);
			        uChartsInstance3[id] = new uCharts({
			          type: "line",
			          context: ctx,
			          width: this.cWidth,
			          height: this.cHeight,
			          categories: data.categories,
			          series: data.series,
			          animation: true,
			          timing: "easeOut",
			          duration: 1000,
			          rotate: false,
			          rotateLock: false,
			          background: "#FFFFFF",
			          color: [ '#e72167', '#526c8f','#00a5f8'],
			          padding: [15,10,0,15],
			          fontSize: 13,
			          fontColor: "#666666",
			          dataLabel: false,//是否显示图表区域内数据点上方的数据文案
			          dataPointShape: false,
			          dataPointShapeType: "solid",
			          touchMoveLimit: 60,
			          enableScroll: true,//滚动
			          enableMarkLine: false,
			          legend: {
			            show: true,
			            position: "bottom",
			            float: "center",
			            padding: 5,
			            margin: 5,
			            backgroundColor: "rgba(0,0,0,0)",
			            borderColor: "rgba(0,0,0,0)",
			            borderWidth: 0,
			            fontSize: 13,
			            fontColor: "#666666",
			            lineHeight: 11,
			            hiddenColor: "#CECECE",
			            itemGap: 10
			          },
			          xAxis: {
			            disableGrid: true,
			            disabled: false,//x轴是否关闭
			            axisLine: true,
			            axisLineColor: "#CCCCCC",
			            calibration: false,
			            fontColor: "#666666",
			            fontSize: 8,//x轴分类项字体的大小
			            rotateLabel: true,//是否旋转x轴分类的数据
			            rotateAngle: 30,//旋转x轴分类的数据的度数
			            itemCount: 10,//x轴显示的个数分类个数
						labelCount:5,//x轴单屏数据显示的个数分类
			            boundaryGap: "center",
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            gridType: "solid",
			            dashLength: 0,
			            gridEval: 4,
			            scrollShow: false,
			            scrollAlign: "left",
			            scrollColor: "#A6A6A6",
			            scrollBackgroundColor: "#EFEBEF",
			            formatter: ""
			          },
			          yAxis: {
			            gridType: "dash",
			            dashLength: 2,
			            disabled: false,
			            disableGrid: false,
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            padding: 10,
			            showTitle: true,
			            data: [
			              {
			                type: "value",
			                position: "left",
			                disabled: false,
			                axisLine: true,
			                axisLineColor: "#CCCCCC",
			                calibration: false,
			                fontColor: "#666666",
			                fontSize: 13,
			                textAlign: "right",
			                title: "MPa",
			                titleFontSize: 11,
			                titleOffsetY: 0,
			                titleOffsetX: 0,
			                titleFontColor: "#666666",
			                min: null,
			                max: _self.gasyAxis3,
			                tofix: 2,
			                unit: "",
			                formatter: ""
			              },
			            ]
			          },
			          extra: {
			            line: {
			              type: "curve",
			              width: 2
			            },
			            tooltip: {
			              showBox: true,
			              showArrow: true,
			              showCategory: true,
			              borderWidth: 0,
			              borderRadius: 0,
			              borderColor: "#000000",
			              borderOpacity: 0.7,
			              bgColor: "#000000",
			              bgOpacity: 0.7,
			              gridType: "solid",
			              dashLength: 4,
			              gridColor: "#CCCCCC",
			              fontColor: "#FFFFFF",
			              splitLine: true,
			              horizentalLine: false,
			              xAxisLabel: false,
			              yAxisLabel: false,
			              labelBgColor: "#FFFFFF",
			              labelBgOpacity: 0.7,
			              labelFontColor: "#666666"
			            },
			            markLine: {
			              type: "solid",
			              dashLength: 4,
			              data: []
			            }
			          }
			        });
			},
			//其它
			touchstart3(e){
			  uChartsInstance3[e.target.id].scrollStart(e);
			},
			touchmove3(e){
			  uChartsInstance3[e.target.id].scroll(e);
			},
			touchend3(e){
			  uChartsInstance3[e.target.id].scrollEnd(e);
			  uChartsInstance3[e.target.id].touchLegend(e);
			  uChartsInstance3[e.target.id].showToolTip(e);
			},
			//水产差压
			drawCharts4(id,data){
			      const ctx = uni.createCanvasContext(id, this);
			        uChartsInstance4[id] = new uCharts({
			          type: "line",
			          context: ctx,
			          width: this.cWidth,
			          height: this.cHeight,
			          categories: data.categories,
			          series: data.series,
			          animation: true,
			          timing: "easeOut",
			          duration: 1000,
			          rotate: false,
			          rotateLock: false,
			          background: "#FFFFFF",
			          color: [ '#e72167', '#526c8f','#00a5f8'],
			          padding: [15,10,0,15],
			          fontSize: 13,
			          fontColor: "#666666",
			          dataLabel: false,//是否显示图表区域内数据点上方的数据文案
			          dataPointShape: false,
			          dataPointShapeType: "solid",
			          touchMoveLimit: 60,
			          enableScroll: true,//滚动
			          enableMarkLine: false,
			          legend: {
			            show: true,
			            position: "bottom",
			            float: "center",
			            padding: 5,
			            margin: 5,
			            backgroundColor: "rgba(0,0,0,0)",
			            borderColor: "rgba(0,0,0,0)",
			            borderWidth: 0,
			            fontSize: 13,
			            fontColor: "#666666",
			            lineHeight: 11,
			            hiddenColor: "#CECECE",
			            itemGap: 10
			          },
			          xAxis: {
			            disableGrid: true,
			            disabled: false,//x轴是否关闭
			            axisLine: true,
			            axisLineColor: "#CCCCCC",
			            calibration: false,
			            fontColor: "#666666",
			            fontSize: 8,//x轴分类项字体的大小
			            rotateLabel: true,//是否旋转x轴分类的数据
			            rotateAngle: 30,//旋转x轴分类的数据的度数
			            itemCount: 10,//x轴显示的个数分类个数
						labelCount:5,//x轴单屏数据显示的个数分类
			            boundaryGap: "center",
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            gridType: "solid",
			            dashLength: 0,
			            gridEval: 4,
			            scrollShow: false,
			            scrollAlign: "left",
			            scrollColor: "#A6A6A6",
			            scrollBackgroundColor: "#EFEBEF",
			            formatter: ""
			          },
			          yAxis: {
			            gridType: "dash",
			            dashLength: 2,
			            disabled: false,
			            disableGrid: false,
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            padding: 10,
			            showTitle: true,
			            data: [
			              {
			                type: "value",
			                position: "left",
			                disabled: false,
			                axisLine: true,
			                axisLineColor: "#CCCCCC",
			                calibration: false,
			                fontColor: "#666666",
			                fontSize: 13,
			                textAlign: "right",
			                title: "压力(MPa)",
			                titleFontSize: 11,
			                titleOffsetY: 0,
			                titleOffsetX: 0,
			                titleFontColor: "#666666",
			                min: null,
			                max: null,
			                tofix: 2,
			                unit: "",
			                formatter: ""
			              },
			            ]
			          },
			          extra: {
			            line: {
			              type: "curve",
			              width: 2
			            },
			            tooltip: {
			              showBox: true,
			              showArrow: true,
			              showCategory: true,
			              borderWidth: 0,
			              borderRadius: 0,
			              borderColor: "#000000",
			              borderOpacity: 0.7,
			              bgColor: "#000000",
			              bgOpacity: 0.7,
			              gridType: "solid",
			              dashLength: 4,
			              gridColor: "#CCCCCC",
			              fontColor: "#FFFFFF",
			              splitLine: true,
			              horizentalLine: false,
			              xAxisLabel: false,
			              yAxisLabel: false,
			              labelBgColor: "#FFFFFF",
			              labelBgOpacity: 0.7,
			              labelFontColor: "#666666"
			            },
			            markLine: {
			              type: "solid",
			              dashLength: 4,
			              data: []
			            }
			          }
			        });
			},
			//其它
			touchstart4(e){
			  uChartsInstance4[e.target.id].scrollStart(e);
			},
			touchmove4(e){
			  uChartsInstance4[e.target.id].scroll(e);
			},
			touchend4(e){
			  uChartsInstance4[e.target.id].scrollEnd(e);
			  uChartsInstance4[e.target.id].touchLegend(e);
			  uChartsInstance4[e.target.id].showToolTip(e);
			},
			//柱塞上行速度
			drawCharts7(id,data){
			      const ctx = uni.createCanvasContext(id, this);
			        uChartsInstance5[id] = new uCharts({
			          type: "line",
			          context: ctx,
			          width: this.cWidth,
			          height: this.cHeight,
			          categories: data.categories,
			          series: data.series,
			          animation: true,
			          timing: "easeOut",
			          duration: 1000,
			          rotate: false,
			          rotateLock: false,
			          background: "#FFFFFF",
			          color: [ '#e72167', '#526c8f','#00a5f8'],
			          padding: [15,10,0,15],
			          fontSize: 13,
			          fontColor: "#666666",
			          dataLabel: false,//是否显示图表区域内数据点上方的数据文案
			          dataPointShape: false,
			          dataPointShapeType: "solid",
			          touchMoveLimit: 60,
			          enableScroll: true,//滚动
			          enableMarkLine: false,
			          legend: {
			            show: true,
			            position: "bottom",
			            float: "center",
			            padding: 5,
			            margin: 5,
			            backgroundColor: "rgba(0,0,0,0)",
			            borderColor: "rgba(0,0,0,0)",
			            borderWidth: 0,
			            fontSize: 13,
			            fontColor: "#666666",
			            lineHeight: 11,
			            hiddenColor: "#CECECE",
			            itemGap: 10
			          },
			          xAxis: {
			            disableGrid: true,
			            disabled: false,//x轴是否关闭
			            axisLine: true,
			            axisLineColor: "#CCCCCC",
			            calibration: false,
			            fontColor: "#666666",
			            fontSize: 8,//x轴分类项字体的大小
			            rotateLabel: true,//是否旋转x轴分类的数据
			            rotateAngle: 30,//旋转x轴分类的数据的度数
			            itemCount: 10,//x轴显示的个数分类个数
						labelCount:5,//x轴单屏数据显示的个数分类
			            boundaryGap: "center",
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            gridType: "solid",
			            dashLength: 0,
			            gridEval: 4,
			            scrollShow: false,
			            scrollAlign: "left",
			            scrollColor: "#A6A6A6",
			            scrollBackgroundColor: "#EFEBEF",
			            formatter: ""
			          },
			          yAxis: {
			            gridType: "dash",
			            dashLength: 2,
			            disabled: false,
			            disableGrid: false,
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            padding: 10,
			            showTitle: true,
			            data: [
			              {
			                type: "value",
			                position: "left",
			                disabled: false,
			                axisLine: true,
			                axisLineColor: "#CCCCCC",
			                calibration: false,
			                fontColor: "#666666",
			                fontSize: 13,
			                textAlign: "right",
			                title: "速度(m/min)",
			                titleFontSize: 11,
			                titleOffsetY: 0,
			                titleOffsetX: 0,
			                titleFontColor: "#666666",
			                min: null,
			                max: null,
			                tofix: 2,
			                unit: "",
			                formatter: ""
			              },
			            ]
			          },
			          extra: {
			            line: {
			              type: "curve",
			              width: 2
			            },
			            tooltip: {
			              showBox: true,
			              showArrow: true,
			              showCategory: true,
			              borderWidth: 0,
			              borderRadius: 0,
			              borderColor: "#000000",
			              borderOpacity: 0.7,
			              bgColor: "#000000",
			              bgOpacity: 0.7,
			              gridType: "solid",
			              dashLength: 4,
			              gridColor: "#CCCCCC",
			              fontColor: "#FFFFFF",
			              splitLine: true,
			              horizentalLine: false,
			              xAxisLabel: false,
			              yAxisLabel: false,
			              labelBgColor: "#FFFFFF",
			              labelBgOpacity: 0.7,
			              labelFontColor: "#666666"
			            },
			            markLine: {
			              type: "solid",
			              dashLength: 4,
			              data: []
			            }
			          }
			        });
			},
			//柱塞上行速度
			drawCharts5(id,data){
			      const ctx = uni.createCanvasContext(id, this);
			        uChartsInstance5[id] = new uCharts({
			          type: "line",
			          context: ctx,
			          width: this.cWidth,
			          height: this.cHeight,
			          categories: data.categories,
			          series: data.series,
			          animation: true,
			          timing: "easeOut",
			          duration: 1000,
			          rotate: false,
			          rotateLock: false,
			          background: "#FFFFFF",
			          color: [ '#e72167', '#526c8f','#00a5f8'],
			          padding: [15,10,0,15],
			          fontSize: 13,
			          fontColor: "#666666",
			          dataLabel: false,//是否显示图表区域内数据点上方的数据文案
			          dataPointShape: false,
			          dataPointShapeType: "solid",
			          touchMoveLimit: 60,
			          enableScroll: true,//滚动
			          enableMarkLine: false,
			          legend: {
			            show: true,
			            position: "bottom",
			            float: "center",
			            padding: 5,
			            margin: 5,
			            backgroundColor: "rgba(0,0,0,0)",
			            borderColor: "rgba(0,0,0,0)",
			            borderWidth: 0,
			            fontSize: 13,
			            fontColor: "#666666",
			            lineHeight: 11,
			            hiddenColor: "#CECECE",
			            itemGap: 10
			          },
			          xAxis: {
			            disableGrid: true,
			            disabled: false,//x轴是否关闭
			            axisLine: true,
			            axisLineColor: "#CCCCCC",
			            calibration: false,
			            fontColor: "#666666",
			            fontSize: 8,//x轴分类项字体的大小
			            rotateLabel: true,//是否旋转x轴分类的数据
			            rotateAngle: 30,//旋转x轴分类的数据的度数
			            itemCount: 80,//x轴显示的个数分类个数
						labelCount:5,//x轴单屏数据显示的个数分类
			            boundaryGap: "center",
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            gridType: "solid",
			            dashLength: 0,
			            gridEval: 4,
			            scrollShow: false,
			            scrollAlign: "left",
			            scrollColor: "#A6A6A6",
			            scrollBackgroundColor: "#EFEBEF",
			            formatter: ""
			          },
			          yAxis: {
			            gridType: "dash",
			            dashLength: 2,
			            disabled: false,
			            disableGrid: false,
			            splitNumber: 5,
			            gridColor: "#CCCCCC",
			            padding: 10,
			            showTitle: true,
			            data: [
			              {
			                type: "value",
			                position: "left",
			                disabled: false,
			                axisLine: true,
			                axisLineColor: "#CCCCCC",
			                calibration: false,
			                fontColor: "#666666",
			                fontSize: 13,
			                textAlign: "right",
			                title: "速度(m/s)",
			                titleFontSize: 11,
			                titleOffsetY: 0,
			                titleOffsetX: 0,
			                titleFontColor: "#666666",
			                min: _self.waterAxis2,
			                max: _self.waterAxis1,
			                tofix: 2,
			                unit: "",
			                formatter: ""
			              },
			            ]
			          },
			          extra: {
			            line: {
			              type: "curve",
			              width: 2
			            },
			            tooltip: {
			              showBox: true,
			              showArrow: true,
			              showCategory: true,
			              borderWidth: 0,
			              borderRadius: 0,
			              borderColor: "#000000",
			              borderOpacity: 0.7,
			              bgColor: "#000000",
			              bgOpacity: 0.7,
			              gridType: "solid",
			              dashLength: 4,
			              gridColor: "#CCCCCC",
			              fontColor: "#FFFFFF",
			              splitLine: true,
			              horizentalLine: false,
			              xAxisLabel: false,
			              yAxisLabel: false,
			              labelBgColor: "#FFFFFF",
			              labelBgOpacity: 0.7,
			              labelFontColor: "#666666"
			            },
			            markLine: {
			              type: "solid",
			              dashLength: 4,
			              data: []
			            }
			          }
			        });
			},
			//其它
			touchstart5(e){
			  uChartsInstance5[e.target.id].scrollStart(e);
			},
			touchmove5(e){
			  uChartsInstance5[e.target.id].scroll(e);
			},
			touchend5(e){
			  uChartsInstance5[e.target.id].scrollEnd(e);
			  uChartsInstance5[e.target.id].touchLegend(e);
			  uChartsInstance5[e.target.id].showToolTip(e);
			},
			zoomCandle(val) {
				canvaCandle.zoom({
					itemCount: val
				});
			},
			sliderMove(e){
				_self.itemCount=e.detail.value;
				_self.zoomCandle(e.detail.value);
			},
			tapButton(type){
				let step=5;
				if(type=='in'){
					_self.itemCount -= step;
					if(_self.itemCount<=5){
						_self.itemCount=5;
					}
				}else{
					_self.itemCount += step;
					if(_self.itemCount>=_self.sliderMax){
						_self.itemCount=_self.sliderMax;
					}
				}
				_self.zoomCandle(_self.itemCount);
			},
			formSecondToWord(val){
				let theTime = parseInt(val);// 秒
				let middle = 0;// 分
				let hour = 0;// 小时
	
				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
						if (middle > 60) {
							hour = parseInt(middle / 60);
							middle = parseInt(middle % 60);
						}
					}
				let result = ""+parseInt(theTime)+"秒";
				if (middle > 0) {
				result = "" + parseInt(middle) + "分" + result;
				}
				if (hour > 0) {
					result = "" + parseInt(hour) + "小时" + result;
				}
				return result;
			},
			xAxisMax(arr){
				let max = 0;
				for(let i=0 ; i<arr.length-1 ; i++){
					if(arr[i]){
						if(arr[i]>max){
							max = arr[i];
						}
					}
				};
				return max;
			},
			xAxisMin(arr){
				let min = null;
				for(let i=0 ; i<arr.length-1 ; i++){
					if(arr[i]){
						if(arr[i]<min){
							min = arr[i];
						}
					}
				};
				return min;
			},
		}
	}
</script>

<style>
	.saqwe1{
		font-size: 20rpx;
		margin-left: 20rpx;
	}
	.saqwe2{
		/* margin-top: -25rpx; */
		margin-left: 110rpx;
	}
	.saqwe3{
		font-size: 20rpx;
		margin-left: 260rpx;
	}
	.saqwe4{
		margin-top: -23px;
		margin-left: 350rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.content-B {
		display: -webkit-flex;
		-webkit-align-items: center;
		align-items: center;
	}
	.title{
		height: 44rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei-Bold, Microsoft YaHei;
		font-weight: bold;
		color: #424242;
		line-height: 44rpx;
		margin-left: 32rpx;
	}
	.title-B{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #8f8f94;
	}
	
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 700upx;
		height: 400upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.charts {
		width: 700upx;
		height: 400upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.text{
		width: 50%;
		size: 24rpx;
		font-size: 36rpx;
		color: #565658;
		width: 100%;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
	}
	.text2{
		width: 50%;
		font-size: 24rpx;
		font-weight: 200;
		color: #000;
		height: 30rpx;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
		border-right: solid 1rpx #b7bbc2;
	}
	.text2-B{
		width: 33%;
		font-size: 24rpx;
		font-weight: 200;
		color: #000;
		height: 30rpx;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
	}
	.zsState-A{
		width: 100%;
		text-align: left;
		margin-top: 8px;
		
		font-size: 14px;
		font-weight: bold;
		color: #858585;
		line-height: 22px;
		
	}
	.zsState-B{
		width: 100%;
		text-align: right;
		margin-top: 8px;
		
		font-size: 14px;
		font-weight: bold;
		color: #F09B00;
		line-height: 22px;
	}
	.zsState-C{
		width: 100%;
		size: 24rpx;
		font-size: 36rpx;
		font-weight:600;
		color: #707070;
		width: 100%;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
		padding-top: 10rpx;
	}
	.AAA{
		margin-top: 50rpx;
		margin-bottom: 20rpx;
	}
	.AAA-1{
		margin-bottom: 20rpx;
	}
	.BBB{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.CCC{
		height: 50rpx;
	}
	.headline-A{
		width: 8rpx;
		height: 40rpx;
		background: #F09B00;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
	}
	.headline-B{
		width: 90%;
		margin-top: 20rpx;
	}
	.zsjzt{
		width: 80%;
		display: flex;
		flex-direction:row;
	}
	.yj-A{
		width: 6px;
		height: 6px;
		background: #C4C4C4;
		opacity: 1;
		margin-left: 10px;
		border-radius: 50%;
	}
	.yj-A2{
		width: 6px;
		height: 6px;
		background: #F02B00;
		opacity: 1;
		margin-left: 10px;
		border-radius: 50%;
	}
	.yj-B{
		width: 40px;
		height: 12px;
		background: #BED57D;
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		margin-left: 10px;
		text-align: center;
	}
	.yj-B2{
		width: 40px;
		height: 14px;
		background: #F02B00;
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		margin-left: 10px;
		text-align: center;
	}
	.yj-B-text{
		width: 40px;
		font-size: 7px;
		font-weight: 300;
		color: #FFFFFF;
	}
	.yj-B-text2{
		width: 40px;
		font-size: 9px;
		font-weight: 400;
		color: #ff5500;
	}
	.yj-C-text{
		text-align: center;
		font-size: 14px;
		font-weight: 400;
		color: #C3BEBA;
		line-height: 22px;
		margin-left: 8px;
	}
	.yj-C-text2{
		font-size: 14px;
		font-weight: bold;
		color: #727272;
		line-height: 22px;
		margin-left: 8px;
		text-align: center;
	}
	.yj-D-text{
		margin-left: 10px;
		text-align: center;
		
		font-size: 12px;
		font-weight: 400;
		color: #C3BEBA;
		
	}
	.loading1{
		margin-top: 50px;
	}
	.scroll-Y {
		height: 200rpx;
	}
	.scroll-x{
		width: 550rpx;
	}
	.scroll-x2{
		width: 550rpx;
	}
	.charts {
		width: 700upx;
		height: 400upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
